/* 
    Created on : Oct 25, 2014, 4:03:57 PM
    Author     : DucTuan
    Doc: Popup
*/

#Wait_Vtv{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 100px;
    margin: auto;
    width: 286px;
    height: 92px;
    padding: 17px;

    @include bg_image("x_03.png");

    .Inside{
        width: 223px;
        height: 51px;
        position: relative;
        margin: auto;
    }

    #Logo{
        width: 127px;
        height: 51px;
        position:relative;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;

        -webkit-animation-name: rotatoY;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 2s;

        /*        animation-name: rotatoY;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-duration: 2s;*/

        figure{
            display: block;
            position: absolute;
            @include bg_image('vtv.png');
            width: 100%;
            height: 100%;
        }

        figure:nth-child(1){@include translateZ(1px)}
        figure:nth-child(2){@include translateZ(2px)}
        figure:nth-child(3){@include translateZ(3px)}
        figure:nth-child(4){@include translateZ(4px)}
        figure:nth-child(5){@include translateZ(5px)}
        figure:nth-child(6){@include translateZ(6px)}
        figure:nth-child(7){@include translateZ(7px)}
        figure:nth-child(8){@include translateZ(8px )}
        figure:nth-child(9){@include translateZ(9px )}
        figure:nth-child(10){@include translateZ(10px)}
        figure:nth-child(11){@include translateZ(11px)}

        figure:nth-child(12){@include translateZ(0px)}

        figure:nth-child(13){@include translateZ(-1px)}
        figure:nth-child(14){@include translateZ(-2px)}
        figure:nth-child(15){@include translateZ(-3px)}
        figure:nth-child(16){@include translateZ(-4px)}
        figure:nth-child(17){@include translateZ(-5px)}
        figure:nth-child(18){@include translateZ(-6px)}
        figure:nth-child(19){@include translateZ(-7px)}
        figure:nth-child(20){@include translateZ(-8px)}
        figure:nth-child(21){@include translateZ(-9px )}
        figure:nth-child(22){@include translateZ(-10px)}
        figure:nth-child(23){@include translateZ(-11px)}
    } 
    #Text{
        text-align: center;
        text-transform: uppercase;
        margin-top: 25px;
        line-height: 21px;
    }
    #Now{
        @include image('c_03.png');
        background-position: 0px 0px;
        width: 100px;
        height: 35px;
        background-position: right bottom;
        width: 100px;
        height: 35px;
        background-size: 223px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
}
.VtvDigital{
    @include bg_image('vtvdigital.png');
    width: 215px;
    height: 25px;
    position: absolute;
    bottom: 21px;
    margin: auto;
    left:0px;
    right: 0px;
}


.Primary{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;


}
.Layout_close{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}
.Box{
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    position: absolute;
    top: 0px;
    left: 11px;
    right: 11px;
    bottom: 0px;
    margin: auto;
    height: 110px;
    padding: 11px;
    border-radius: 5px;
    border: 2px solid rgba(0,0,0,.2);
    z-index:9999;
    .Header{
        font-size: 22px;
    }
    .Thongbao{
        font-size: 17px;
        margin-top: 10px;
    }
}

.ListView{
    li{
        list-style: none;
        position: relative;
        padding-bottom: 40%;
        margin-bottom:1px;
        .inside{
            display: block;
            position: absolute;
            bottom: 0px;
            top: 0px;
            left: 0;
            right: 0;
            background: #fff;
            padding: 5px;
            .relative{
                position:relative;
                width:100%;
                height:100%;
                .btnFollow{
                    top: 0px;
                    right: 0px;
                }
                .image{
                    width: 100%;
                    height: 100%;
                    background-size: 100% 100%!important;
                }
                .info{
                    height: 34px;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;

                    .logo{
                        width: 50px;
                        height: 16px;
                        margin-top: 10px;
                        margin-left: 10px;
                    }
                    .schedule{
                        font-size: 12px;
                        padding:9px 12px;

                        .icon-clock{
                            width: 19px;
                            height: 17px;
                            margin-right: 7px;
                            margin-bottom: -4px;
                            background-size: 93% 100%;
                        }
                        .text{
                        }
                    }
                    .playing{
                        padding: 11px 12px;
                    }
                }
                .info:before{
                    height: 20px;
                }
            }

        }
    }
    li.selected{

    }
}

.info{
    position: absolute;
    bottom: 5px;
    left: 6px;
    right: 5px;
    height: 50px;
    background: rgba(0,0,0,.5);
    color:#fff;

    .logo{
        width: 66px;
        height: 22px;
        background-size: 100% 100% !important;
        float: left;
        margin-top: 14px;
        margin-left: 10px;
    }
    .schedule{
        width: 50%;
        float: right;
        font-size: 14px;
        text-align: right;
        padding: 14px 10px;
        position:relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .icon-clock{
            display: inline-block;
            @include image('icon-clock.png');
            background-position: 1px 0px;
            width: 21px;
            height: 20px;
            margin-right: 7px;
            margin-bottom: -4px;
        }
    }

    .playing{
        color: #ffc225;
        text-transform: uppercase;
        padding-top: 16px;
    }
}
.info:before{
    content: "";
    height: 20px;
    width: 1px;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 7px;
}
.info:after{
    @include clearfix();
}